<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <view class="avatar xcx">
            <open-data type="userAvatarUrl"></open-data>
        </view>
        <!-- #endif -->

        <view class="title">
            <text>请验证并绑定你的账号</text>
        </view>

        <view style="width: 90%;">
            <u--form labelWidth="90" labelAlign="center" :model="admin" :rules="rules" ref="uForm">
                <u-form-item label="用户名" prop="username" class="item">
                    <u--input v-model="admin.username"></u--input>
                </u-form-item>
                <u-form-item label="密码" prop="password" class="item">
                    <u--input v-model="admin.password" password></u--input>
                </u-form-item>
                <!-- 用户协议 -->
                <u-form-item label=" " prop="agreement" class="item">
                    <view class="agreement">
                        <u-checkbox-group v-model="admin.agreement">
                            <u-checkbox name="agreement" label="我已阅读并同意" />
                            <navigator class="url" url="/pages/index/agreement">用户服务协议、隐私政策</navigator>
                        </u-checkbox-group>
                    </view>
                </u-form-item>
            </u--form>
        </view>

        <u-button type="warning" icon="pushpin-fill" @click="onBind" :customStyle="btnStyle">绑定帐号</u-button>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>
<script>
export default {
    data() {
        return {
            openid:'',
            admin:{
                username:'',
                password:'',
                agreement:false
            },
            rules: {
                'username': {
                    type: 'string',
                    required: true,
                    message: '请填写用户名',
                    trigger: ['blur', 'change']
                },
                'password': {
                    type: 'string',
                    required: true,
                    message: '请填写密码',
                    trigger: ['blur', 'change']
                },
                'agreement': {
                    type: 'array',
                    required: true,
                    message: '请阅读用户协议',
                    trigger: ['blur', 'change']
                }
            },
            btnStyle:{
                marginTop:'10px'
            }
        }
    },
    methods: {
        onBind()
        {
            this.$refs.uForm.validate().then(async () => {
                if(!this.openid)
                {
                    this.$refs.uToast.show({
                        type:'error',
                        message:'获取登录凭证失败',
                    });

                    return;
                }

                let data = {
                    username:this.admin.username,
                    password:this.admin.password,
                    openid:this.openid
                }

                let result = await this.$u.api.admin.bind(data);

                if(result && result.code === 1)
                {
                    this.$refs.uToast.show({
                        type:'success',
                        message:result.msg,
                        complete:() => {
                            // this.$u.route({
                            //     type:'switchTab',
                            //     url:'pages/admin/index',
                            // });

                            this.$u.route({
                                type:'navigateBack'
                            });
                        }
                    });

                    return;
                }else{
                    this.$refs.uToast.show({
                        type:'error',
                        message:result.msg,
                    });

                    return;
                }
            }).catch((err) => {
                
            });
        }
    },
    onLoad(options)
    {
        this.openid = options.openid;
    },
    onReady() {
		//onReady 为uni-app支持的生命周期之一
    	this.$refs.uForm.setRules(this.rules)
    },

}
</script>

<style>
	.container {
		height: 100%;
		margin: 0 80rpx;
		box-sizing: border-box;
	}

	.avatar {
		text-align: center;
	}

	.u-avatar {
		margin: 80rpx auto 40rpx;
	}

	.xcx {
		width: 200rpx;
		height: 200rpx;
		margin: 80rpx auto 40rpx;
		border-radius: 100%;
		overflow: hidden;
	}

	.nickname {
		font-size: 14px;
		text-align: center;
	}

	.title {
		text-align: center;
		margin: 40rpx 0;
		font-size: 20px;
	}

	.img-captcha {
		display: block !important;
	}

	.btn-submit {
		margin-top: 40rpx !important;
	}

	.href-bindmobile {
		margin-top: 40rpx;
		text-align: center;
		font-size: 14px;
		color: var(--color-primary);
	}

	.u-form .u-form-item__body__right__message {
		margin-left: 0px !important;
	}
	/* #ifdef MP-WEIXIN  */
	/deep/.u-form .u-form-item__body__right__message{
			margin-left:90px!important;
		}
	/* #endif    */

	.agreement {
		margin-top: .7em;
		display: flex;
	}

	.agreement .url {
		color: #3c9cff;
		margin-left: 2px;
	}
</style>